<template>
  <div class="wish-wall-container">
    <div class="wish-wall-header">
      <h1>高考许愿墙</h1>
      <p class="subtitle">在这里写下你的高考愿望，让梦想起航！</p>
    </div>

    <div class="wish-form-container">
      <el-form :model="wishForm" :rules="rules" ref="wishFormRef" label-position="top">
        <el-form-item label="你的昵称" prop="name">
          <el-input v-model="wishForm.name" placeholder="请输入你的昵称（选填）"></el-input>
        </el-form-item>
        
        <el-form-item label="目标院校" prop="school">
          <el-input v-model="wishForm.school" placeholder="请输入你的目标院校"></el-input>
        </el-form-item>
        
        <el-form-item label="许愿内容" prop="content">
          <el-input 
            v-model="wishForm.content" 
            type="textarea" 
            :rows="4" 
            placeholder="写下你的高考愿望和祝福..."
          ></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitWish" :loading="submitting">发布愿望</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="wish-wall">
      <h2>愿望墙 <span class="wish-count">({{ wishes.length }}条)</span></h2>
      
      <div class="wish-filters">
        <el-radio-group v-model="filterType" size="small">
          <el-radio-button label="all">全部</el-radio-button>
          <el-radio-button label="hot">热门</el-radio-button>
          <el-radio-button label="latest">最新</el-radio-button>
        </el-radio-group>
      </div>
      
      <div class="wish-list" v-if="filteredWishes.length > 0">
        <div 
          v-for="wish in filteredWishes" 
          :key="wish.id" 
          class="wish-card"
          :style="{ backgroundColor: getRandomColor(wish.id) }"
        >
          <div class="wish-content">{{ wish.content }}</div>
          <div class="wish-school">目标院校：{{ wish.school }}</div>
          <div class="wish-footer">
            <span class="wish-author">{{ wish.name || '匿名用户' }}</span>
            <span class="wish-date">{{ formatDate(wish.date) }}</span>
          </div>
          <div class="wish-actions">
            <button class="like-btn" @click="likeWish(wish)">
              <i class="like-icon" :class="{ 'liked': wish.isLiked }"></i>
              <span>{{ wish.likes }}</span>
            </button>
          </div>
        </div>
      </div>
      
      <div class="no-wishes" v-else>
        <el-empty description="暂无愿望，快来添加第一条吧！"></el-empty>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 表单数据
const wishForm = ref({
  name: '',
  school: '',
  content: ''
})

// 表单验证规则
const rules = {
  school: [
    { required: true, message: '请输入目标院校', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入愿望内容', trigger: 'blur' },
    { min: 5, max: 200, message: '愿望内容长度在5到200个字符之间', trigger: 'blur' }
  ]
}

const wishFormRef = ref(null)
const submitting = ref(false)
const filterType = ref('all')

// 示例数据
const wishes = ref([
  {
    id: 1,
    name: '追梦人',
    school: '清华大学',
    content: '希望能考上清华大学计算机系，实现自己的梦想！',
    date: new Date('2023-05-20'),
    likes: 42,
    isLiked: false
  },
  {
    id: 2,
    name: '未来科学家',
    school: '北京大学',
    content: '愿我能金榜题名，考入北大物理学院，为祖国科研事业贡献力量！',
    date: new Date('2023-05-21'),
    likes: 38,
    isLiked: false
  },
  {
    id: 3,
    name: '医学梦',
    school: '复旦大学',
    content: '希望能考上复旦医学院，成为一名优秀的医生，救死扶伤！',
    date: new Date('2023-05-22'),
    likes: 35,
    isLiked: false
  },
  {
    id: 4,
    name: '',
    school: '浙江大学',
    content: '浙大计算机，我来了！高考加油！',
    date: new Date('2023-05-23'),
    likes: 27,
    isLiked: false
  },
  {
    id: 5,
    name: '文学少年',
    school: '武汉大学',
    content: '愿能考入武大中文系，在樱花树下读诗赏文，成为一名作家！',
    date: new Date('2023-05-24'),
    likes: 31,
    isLiked: false
  }
])

// 根据筛选条件过滤愿望
const filteredWishes = computed(() => {
  let result = [...wishes.value]
  
  if (filterType.value === 'hot') {
    return result.sort((a, b) => b.likes - a.likes)
  } else if (filterType.value === 'latest') {
    return result.sort((a, b) => new Date(b.date) - new Date(a.date))
  }
  
  return result
})

// 提交愿望
const submitWish = () => {
  wishFormRef.value.validate((valid) => {
    if (valid) {
      submitting.value = true
      
      // 模拟提交
      setTimeout(() => {
        const newWish = {
          id: wishes.value.length + 1,
          name: wishForm.value.name.trim(),
          school: wishForm.value.school,
          content: wishForm.value.content,
          date: new Date(),
          likes: 0,
          isLiked: false
        }
        
        wishes.value.unshift(newWish)
        
        // 重置表单
        wishFormRef.value.resetFields()
        
        ElMessage({
          message: '愿望发布成功！',
          type: 'success'
        })
        
        submitting.value = false
      }, 800)
    }
  })
}

// 点赞功能
const likeWish = (wish) => {
  if (!wish.isLiked) {
    wish.likes++
    wish.isLiked = true
    ElMessage({
      message: '点赞成功！',
      type: 'success'
    })
  } else {
    wish.likes--
    wish.isLiked = false
  }
}

// 格式化日期
const formatDate = (date) => {
  const d = new Date(date)
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 根据ID生成随机颜色
const getRandomColor = (id) => {
  const colors = [
    '#FFF8E1', '#F3E5F5', '#E3F2FD', '#E8F5E9', 
    '#FFF3E0', '#FFEBEE', '#E0F7FA', '#F1F8E9'
  ]
  return colors[id % colors.length]
}
</script>

<style scoped>
.wish-wall-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

.wish-wall-header {
  text-align: center;
  margin-bottom: 30px;
  background: linear-gradient(135deg, #ff7e5f, #feb47b);
  padding: 40px 20px;
  border-radius: 10px;
  color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.wish-wall-header h1 {
  font-size: 36px;
  margin-bottom: 10px;
  color: white;
}

.subtitle {
  font-size: 18px;
  opacity: 0.9;
}

.wish-form-container {
  background-color: white;
  border-radius: 10px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.wish-wall {
  background-color: white;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.wish-wall h2 {
  margin-bottom: 20px;
  font-size: 22px;
  color: #333;
  display: flex;
  align-items: center;
}

.wish-count {
  font-size: 16px;
  color: #909399;
  margin-left: 10px;
}

.wish-filters {
  margin-bottom: 20px;
}

.wish-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.wish-card {
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.wish-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.wish-content {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 15px;
  flex-grow: 1;
}

.wish-school {
  font-weight: bold;
  margin-bottom: 10px;
  color: #303133;
}

.wish-footer {
  display: flex;
  justify-content: space-between;
  color: #606266;
  font-size: 14px;
  margin-bottom: 10px;
}

.wish-actions {
  display: flex;
  justify-content: flex-end;
}

.like-btn {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #606266;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.like-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.like-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23909399'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.5;
}

.like-icon.liked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F56C6C'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  opacity: 1;
}

.no-wishes {
  padding: 40px 0;
  text-align: center;
}

@media (max-width: 768px) {
  .wish-list {
    grid-template-columns: 1fr;
  }
  
  .wish-wall-header {
    padding: 30px 15px;
  }
  
  .wish-wall-header h1 {
    font-size: 28px;
  }
}
</style> 